<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css">

    <title>人员大屏配置</title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            position: relative;
        }
        #box{
            width: 40%;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 40px 0;
            margin: 10% auto;
        }
        .center_father{
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }
        #form1{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        #form1 input{
            width: 100%;
        }
        #form1 .click{
            float: right;
        }
        .banner{
            width: 426px;
            margin: auto;
            overflow: hidden;
        }
        .banner .subNav{
            width: 40%;
            float: left;
            font-weight: 600;
            font-size: 20px;
            line-height: 40px;
        }
        .banner .navContent{
            width: 60%;
            float: right;
        }
        .title{
            font-weight: 600;
            margin-right: 10px;
            line-height: 40px;
        }
        .navContent li{
            margin-bottom: 10px;
            overflow: hidden;
        }
        .navContent li button{
            float: right;
        }
        #cont .subNav {
				width: 100%;
				height: 5%;
				display: flex;
				/*align-items:flex-end;*/
				align-items: center;
				font-weight: 600;
				font-size: 25px;
				/*justify-content:center;*/
				box-shadow: 0 5px 1px #f1f1f1;
			}
            #cont .navContent {
				display: none;
				width: 100%;
				background: #D4D4D7;
				padding: 20px 0;
				/*text-align: center;*/
			}
			#cont .subNav span {
				/*margin-left: 20%;*/
				text-align: right;
				display: inline-block;
				width: 30%;
			}

			#cont .navContent li span {
				float: left;
				font-weight: 600;
				display: inline-block;
				width: 10%;
				text-align: right;
			}

			#cont .navContent li input {
				float: right;
				/*font-weight: 600;*/
				display: inline-block;
				width: 40%;
				height: 75%;
				padding-left: 5px;
			}




    </style>
</head>
<body class="sec_body">
<div id="box">
    <div class="center_father">
        <h1 class="center">人员大屏配置</h1>
    </div>
    <form id="form1" method="post" action="/setConfugure">
        <table align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td width="150" align="right">主服务器地址:&nbsp;&nbsp;</td>
                <td width="276"><input name="masterServer" type="text" id="masterServer" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td align="right">备服务器地址:&nbsp;&nbsp;</td>
                <td><input name="standbyServer" type="text" id="standbyServer" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>


            <tr>
                <td align="right">检测距离:&nbsp;&nbsp;</td>
                <td><input name="distance" type="number" id="distance" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>


            <tr>
                <td align="right">读卡器编号:&nbsp;&nbsp;</td>
                <td><input name="cardReaderNumber" type="text" id="cardReaderNumber" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>

            <tr>
                <td align="right">广告屏标题:&nbsp;&nbsp;</td>
                <td><input name="advertisingScreenTitle" type="text" id="advertisingScreenTitle" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>


            <tr>
                <td align="right">翻页间隔时间(秒):&nbsp;&nbsp;</td>
                <td><input name="pageIntervalTime" type="number" id="pageIntervalTime" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>

            <tr>
                <td align="right">待机间隔时间(秒):&nbsp;&nbsp;</td>
                <td><input name="mAdvertisingSwitchingTime" type="number" id="mAdvertisingSwitchingTime" value=""/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>


            <tr>
                <td align="right">滚动屏播放速度:&nbsp;&nbsp;</td>
                <td><input name="scrollPlaybackSpeed" type="text" id="scrollPlaybackSpeed" value="" oninput="value=value.match(/^\d+(?:\.\d{0,1})?/)"/></td>
            </tr>
            <tr>
                <td width="150">&nbsp;&nbsp;</td>
                <td width="276">&nbsp;&nbsp;</td>
            </tr>

            <tr>
                <td align="right"></td>
                <td class="click">
                    <input type="submit" name="Submit" value="配  置" />
                </td>
            </tr>
        </table>

    </form>
    <div class="banner">
        <div class="subNav"><span>广告屏播放文件:</span></div>
        <ul class="navContent">
            <li><span class="title">文件上传:</span><input type="file" id="advertisementFile"></li>
            <li>
                <progress id="myprogress" value="0" max="100"></progress>
            </li>
            <li>
                <button onclick="uploadFile()">提交</button>
            </li>
            <li>
                <button onclick="getUploadInfo()">获取更新结果</button>
            </li>
        </ul>
    </div>





    <div class="banner">
        <div class="subNav"><span>打开设置界面:</span></div>
        <ul class="navContent">
            <li>
                <button onclick="openSetting()">打开设置界面</button>
            </li>
        </ul>
    </div>



    <div class="banner">
        <div class="subNav"><span>查看领导信息:</span></div>
        <ul class="navContent">
            <li>
                <button onclick="viewLeader()">查看配置领导信息</button>
            </li>
        </ul>
    </div>




</div>
<script>


   function viewLeader() {
			$.ajax({
				type: "post",
				url: "/viewLeader",
				async: true,
				cache: false,
				dataType: "text",
				success: function(result, status) {
					alert(result);
				},
				error: function(e) {
					alert("获取信息失败" + e.statusText)
				}
			});

		}

function uploadFile() {
			var _myprogress = document.getElementById("pluginProgress")
			var formData = new FormData()
			var files = $("#plugin")[0].files[0]
			formData.append('plugin', files)
			$.ajax({
				url: "/plugin",
				type: "post",
				processData: false,
				contentType: false,
				dataType: "text",
				data: formData,
				async: true,
				success: function(result, status) {
					alert(result)
				},
				error: function(e) {
					alert("修改失败" + e.statusText)
				},
				xhr: function() {
					myXhr = $.ajaxSettings.xhr();
					if(myXhr.upload) {
						myXhr.upload.addEventListener('progress', function(e) {
							var loaded = e.loaded; //已经上传大小的情况
							var total = e.total; //总大小
							var percent = Math.floor(100 * loaded / total);
							_myprogress.value = percent;

						}, false);
					}
					return myXhr;
				}

			});
		}




 getConfig()

function openSetting() {
			$.ajax({
				type: "post",
				url: "/openSetting",
				async: true,
				cache: false,
				dataType: "text",
				success: function(result, status) {
					alert(result);
				},
				error: function(e) {
					alert("获取信息失败" + e.statusText)
				}
			});

		}


function getUploadInfo() {
			$.ajax({
				type: "get",
				//					contentType: "application/json;charset=UTF-8",
				url: "/pluginInfo",
				async: true,
				cache: false,
				dataType: "text",
				success: function(result, status) {
					alert(result);
				},
				error: function(e) {
					alert("获取信息失败" + e.statusText)
				}
			});

		}


		function getUploadInfo() {
			$.ajax({
				type: "get",
				//					contentType: "application/json;charset=UTF-8",
				url: "/updateInfo",
				async: true,
				cache: false,
				dataType: "text",
				success: function(result, status) {
					alert(result);
				},
				error: function(e) {
					alert("获取信息失败" + e.statusText)
				}
			});

		}


 function uploadFile() {
			var _myprogress = document.getElementById("myprogress")
			var formData = new FormData()
			var files = $("#advertisementFile")[0].files[0]
			formData.append('advertisementFile', files)
			$.ajax({
				url: "/AdvertisementUpdate",
				type: "post",
				processData: false,
				contentType: false,
				dataType: "text",
				data: formData,
				async: true,
				success: function(result, status) {
					alert(result)
				},
				error: function(e) {
					alert("修改失败" + e.statusText)
				},
				xhr: function() {
					myXhr = $.ajaxSettings.xhr();
					if(myXhr.upload) {
						myXhr.upload.addEventListener('progress', function(e) {
							var loaded = e.loaded; //已经上传大小的情况
							var total = e.total; //总大小
							var percent = Math.floor(100 * loaded / total);
							_myprogress.value = percent;

						}, false);
					}
					return myXhr;
				}

			});
		}


    function getConfig(){
        $.ajax({
               type: "post",
               url: "/getConfugure",
               async: true,
               dataType: "json",
               success:function(result, status){
                console.log(result);
                document.getElementById("masterServer").value=result.masterServer;
                document.getElementById("standbyServer").value=result.standbyServer;
                document.getElementById("distance").value=result.distance;
                document.getElementById("cardReaderNumber").value=result.cardReaderNumber;
                document.getElementById("advertisingScreenTitle").value=result.advertisingScreenTitle;
                document.getElementById("mAdvertisingSwitchingTime").value=result.mAdvertisingSwitchingTime;
                document.getElementById("pageIntervalTime").value=result.pageIntervalTime;
                document.getElementById("scrollPlaybackSpeed").value=result.scrollPlaybackSpeed;
                },
               error: function(e) {
					alert(e);
			   }
 });
}

















</script>
</body>
</html>
